DragButton = function(elem, webobjClass){
	this.elem = elem;
	elem.className = 'dragbutton';// tooltip';//add tooltip class for custom tooltip
	elem.setAttribute('title'/*'data-title'*/,//custom tooltip use data attribute data-title
		'Drag to Canvas to create '+webobjClass.prototype._class);
	
	UI.makeDragDrop(this.elem, _webcanvas.elem, function(clientX, clientY, clip){
		_webcanvas.createObject(new webobjClass(), clientX, clientY);
	});
	/*
	this.elem.addEventListener('mousedown', function(e){
		e.stopPropagation();
	},false);*/
}

WebObj = (function(){
	var gid = 0;
	return function(){
		this.isShared = false;
		this.id = gid++;
		this.visible = true;
		this.props = {};
	}
})();

_registerClass('WebObj',WebObj);

WebObj.prototype.makeDraggable = function(elem){
	var upval = this;
	if (_browser.is_mobile){
		elem.addEventListener('touchstart',function(e){
			if (!_webcanvas.preview){
				_webcanvas.select = upval;
				e.preventDefault();
			}
			e.stopPropagation();
		},false);	
	}else
		elem.addEventListener('mousedown',function(e){
			if (!_webcanvas.preview){
				_webcanvas.select = upval;
			}
			e.stopPropagation();
		},false);
	if (_browser.is_mobile && this instanceof WebTextBox){//TextBox in mobile
		Property(this, 'width', '60px', true, function(val){
			upval.elem.style.width = val;
			elem.style.width = val;
		});
		/*upval.elem.style.width = '60px';
		elem.style.width = '60px';*/
		this.addProp('width');
		Property(this, 'height', '40px', true, function(val){
			upval.elem.style.height = val;
			elem.style.height = val;
		});
		this.addProp('height');
		Property(this, 'left', '0px', true, function(val){
			upval.elem.style.left = val;
			elem.style.left = val;
		});
		this.addProp('left');
		Property(this, 'top', '0px', true, function(val){
			upval.elem.style.top = val;
			elem.style.top = val;
		});
		this.addProp('top');
	}else{
		BindProperty(this, 'width', '60px', this.elem.style, 'width', true);
		BindProperty(this, 'height', '40px', this.elem.style, 'height', true);
		BindProperty(this, 'left', '0px', this.elem.style, 'left', true);
		BindProperty(this, 'top', '0px', this.elem.style, 'top', true);
	}
}

WebObj.prototype.addProp = function(name){
	this.props[name] = true;
}

WebObj.prototype.serialize = function(){
	var ret={};
	for (prop in this.props){
		if (this[prop] instanceof ArrayProperty)
			ret[prop] = this[prop].serialize();
		else
			ret[prop] = _clone(this[prop]);
	};
	ret._class = this._class;
	return ret;
}

WebObj.deserialize = function(data){
	var f = function(data){
		var newObj = new _global[data._class]();
		for (prop in data){
			if (data[prop] instanceof Object && '_class' in data[prop]){
				newObj[prop] = f(data[prop]);
			}else
				newObj[prop] = data[prop];
		}
		return newObj;
	}
	var ret;
	Revision.combine({}, function(){
		ret = f(data);
	});
	return ret;
}

WebObj.prototype.toogleDebug = function(bool){
	
}

WebObj.prototype.toogleEdit = function(bool){
	
}

WebObj.prototype.genObj = function(){
	//replace with fastest code possible
}


/*example of inherited method
WebObj.prototype.sth = function(){
	return 'base'+this.visible;
}
*/

var WebButton = function(){
	this.elem = document.createElement('input');
	WebObj.call(this);
	this.makeDraggable(this.elem);

	BindProperty(this, 'caption', 'button'+this.id, this.elem, 'value', true);
	BindProperty(this, 'background', 'lightgray', this.elem.style, 'background', true);
	BindProperty(this, 'border', '2pt solid blue', this.elem.style, 'border', true);
	if (_browser.is_firefox)
		BindProperty(this, 'border-radius', '7pt', this.elem.style, 'borderRadius', true);
	else
		BindProperty(this, 'border-radius', '7pt', this.elem.style, 'border-radius', true);
	
	with(this){
		elem.className = 'webbutton';
		elem.type = 'button';
		elem.addEventListener('click',function(e){
			alert('abc');
		},false);
	}
}

//WebButton.prototype.__proto__ = WebObj.prototype;
_inherit('WebButton', WebButton, WebObj);

var WebTextBox = function(){
	this.elem = document.createElement('input');
	WebObj.call(this);
	if (_browser.is_mobile){
		this.elem_cover = document.createElement('div');
		this.elem_cover.className = 'coverdiv';
		this.makeDraggable(this.elem_cover);
	}else{
		this.makeDraggable(this.elem);
	}

	BindProperty(this, 'caption', 'text'+this.id, this.elem, 'value', true);
	BindProperty(this, 'font', 'arial', this.elem.style, 'font-family', true);
	BindProperty(this, 'font_size', '8pt', this.elem.style, 'font-size', true);
	BindProperty(this, 'background', 'white', this.elem.style, 'background', true);
	BindProperty(this, 'border', '1pt dashed black', this.elem.style, 'border', true);
	BindProperty(this, 'border-radius', '3pt', this.elem.style, 'border-radius', true);
	
	
	with(this){
		elem.className = 'webbutton';
		elem.type = 'text';
		//elem.disabled="disabled";
	}
}

//WebTextBox.prototype.__proto__ = WebObj.prototype;
_inherit('WebTextBox', WebTextBox, WebObj);


//WebButton.prototype.constructor = WebObj.prototype;//work but does not work with instanceof

/*example of overiding method
WebButton.prototype.sth = function(){
	return 'a'+WebObj.prototype.sth.call(this);
}
*/
//logpush('Finish processing DragButton');